<template>
  <div>
    <div class="rmqd">
              <div class="rmqdone">热门清单</div>
              <div class="zuoyouhua">
                <div class="tupianss" v-for="(v,index) in neirong" :key="index">
                  <img :src="v.urls" alt="">
                  <p>{{ v.p }}</p>
                </div>
              </div>
              <div class="shangsss">
                <div class="rmqdone">清单文章</div>
                <div>
                  <div class="ddddddd" v-for="(v,index) in neirong" :key="index">
                    <div class="hhuo">
                      <img src="//static.asus.com.cn/static/wap/img/user.png" alt=""><p class="wyps">好货清单</p><p>2023-02-03</p>
                    </div>
                    <div class="fxdtp">
                      <img :src="v.urls" alt="">
                      <p>{{v.p}}</p>
                      <p class="xiaosj">{{v.p1}}</p>
                      <div><span class="fxzuo"><van-icon name="eye-o" />{{v.yan}}</span><span class="fxyou"><van-icon name="other-pay" />{{ v.wen }}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        neirong:""
      }
    },
    mounted(){
        this.$http({
            url:"http://localhost:3000/fxyouneirongrenmen",
            method:"get"
        }).then(res=>{
            this.neirong = res.data;
            console.log(res.data);
        })
    }
}
</script>

<style scoped>
  .ddddddd{
    margin: 8vw auto;;
    width: 94vw;
    box-shadow: 5px 5px 5px #e7e0e0;
    border:1px solid #ede3e3;

  }
  .fxyou{
    margin-left: 10vw;
  }
  .fxzuo{
    margin-left: 60vw;
  }
  .xiaosj{
    opacity: 0.5;
    margin: 2.5vw 0;
  }
  .fxdtp p{
    width: 85vw;
    padding: 0vw 3vw;
  }
  .fxdtp img{
    width: 88vw;
  }
  .fxdtp{
    width: 94vw;
    margin: 3vw;
  }
  .wyps{
    flex-grow: 1;
  }
  .hhuo{
    display: flex;
    height: 13vw;
    line-height: 13vw;
    padding: 1vw 3vw;
  }
  .tupianss img{
    width: 60vw;
  }
  .hhuo img{
    width: 11vw;
    height: 11vw;
    margin-right: 2vw;
  }
  .shangsss{
    margin-top: 6vw;
  }
  .tupianss p{
    height: 7vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 2vw 0 2vw;
  }
  .tupianss{
    width: 60vw;
    height: 49vw;
    font-size: 5vw;
    text-align: center;  
    margin: 2vw 6vw 0 0;
    box-shadow: 5px 5px 5px #e7e0e0;
    border:1px solid #ede3e3;
  }
  .rmqdone{
    width: 100vw;
    height: 13vw;
    text-align: center;
    line-height: 13vw;
    font-size: 5.5vw;
  }
  .zuoyouhua{
    width: 90.66666667vw;
    height: 54vw;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    overflow: scroll;
    flex-wrap: nowrap;
  }
  .rmqd{
    width: 100vw;
    height: 72vw;
  }
</style>